import React, { useState, useEffect, useRef } from 'react'
import { Space, Table, Button, Form } from 'antd';
import type { TableProps } from 'antd';
import { getlist, getdel, getadd, getedit } from "../api/index";
import Add from "./components/Add";
import Edit from "./components/Edit";
// import {  } from "../images/01.jpg";

function Index() {
  const columns: TableProps['columns'] = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '姓名',                                                                                    
      dataIndex: 'shopName',
      key: 'shopName',
      render: (text) => <span>{text}</span>,
    },
    {
      title: '详细地址',
      dataIndex: 'shopAddress',
      key: 'shopAddress',
    },
    {
      title: '图像',
      dataIndex: 'shopImage',
      key: 'shopImage',
      render: (text) => <img src={text} className='img' alt="" />,
    },
    {   
      title: '操作',
      key: 'action',
      render: (record) => (
        <Space size="middle">
          <Button onClick={() => showModal1(record)}>修改</Button>
          <Button onClick={() => del(record.id)}>删除</Button>
        </Space>
      ),
    },
  ];
  // 删除数据
  const del = async (id: any) => {
    let res = await getdel(id)
    if (res.data.code === 10000) {
      listData()
    }
  }
  // 获取数据
  const [list, setList] = useState([])
  const listData = async (search: any) => {
    let params = {
      searchValue: search
    }
    let res = await getlist(params)
    console.log(res.data.data.data);
    // 存储到数据列表
    setList(res.data.data.data)
  }
  useEffect(() => {
    listData()
  }, ['list', 'search'])
  // 搜索
  const search = useRef(null)
  const getsea = async () => {
    console.log(search.current.value);
    await listData(search.current.value);
    search.current.value = ''
  }
  // 打开弹窗
  const [isadd, setisadd] = useState(true)
  // 添加
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [addtitle, setaddtitle] = useState('添加数据')
  const [color, setcolor] = useState("");
  const add = async (values: any) => {
    let res = await getadd(values)
    // 添加成功
    if (res.data.code === 10000) {
      listData()
    }
    setIsModalOpen(false);
  }
  const showModal = () => {
    if (isadd === true) {
      setaddtitle('添加列表数据')
      setcolor("link")
    }
    setisadd(true)
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  // 修改
  const [isModalOpen1, setIsModalOpen1] = useState(false);
  const [form] = Form.useForm()
  // 数据
  const [edittitle, setedittitle] = useState('修改数据')
  const edit = async (values: any) => {
    console.log(values);
    let data = {
      id: values.id,
      shopName: values.shopName,
      shopAddress: values.shopAddress,
      shopImage: values.shopImage,
      shopTel: values.shopTel
    }
    console.log(data);
    let res = await getedit(data)
    console.log(res);
    // 修改成功
    if (res.data.code === 10000) {
      listData()
      // 关闭弹窗
      setIsModalOpen1(false);
    }
    // 重新获取内容
    form.resetFields();
  }
  const showModal1 = (item: any) => {
    console.log(item);
    if (item.id) {
      setisadd(false)
      setedittitle('修改列表数据')
      form.setFieldsValue(item);
      console.log(form);
    }
    setIsModalOpen1(true);
  };
  const handleOk1 = () => {
    setIsModalOpen1(false);
  };
  const handleCancel1 = () => {
    setIsModalOpen1(false);
  };
  return (
    <div>
      <Edit
        isadd={isadd}
        edit={edit}
        isModalOpen1={isModalOpen1}
        handleOk1={handleOk1}
        handleCancel1={handleCancel1}
        addtitle={addtitle}
        edittitle={edittitle}
        form={form}
      ></Edit>
      <Add
        isadd={isadd}
        add={add}
        isModalOpen={isModalOpen}
        handleOk={handleOk}
        handleCancel={handleCancel}
        addtitle={addtitle}
        edittitle={edittitle}
        color={color}
      ></Add>
      <Button type="primary" onClick={showModal}>
        添加
      </Button>
      <input type="text" ref={search} /><button onClick={getsea}>搜索</button>
      <Table columns={columns} dataSource={list} pagination={false} />
    </div>
  )
}

export default Index